<template>
    <div style="width:100%;height:100%;position:relative">
        <header class="base-header">
            <i class="link-icon" @tap="goback"></i>
            <h1>我的订单</h1>
        </header>
        <div class="type-select">
            <span v-for="(index,tab) in tabs" :class="{active:(currentIndex==index)}" @tap="switchTab(index)">{{tab}}</span>
        </div>
        <div class="order-wrap" style="position:absolute;width:100%;height:calc(100% - 107px);">
            <!--下拉刷新容器-->
            <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
                <div class="mui-scroll">
                    <!--数据列表-->
                    <div class="mui-table-view mui-table-view-chevron list-line">
                      <div class="no-data" v-if="data.orderList.length===0" style="background:#efeef4;width:100%;height:360px;text-align:center;color:#bbb;">
                        <img src="../../public/images/noorder.png" style="width:160px;" alt="">
                        <span style="font-size:14px;">暂时没有订单</span>
                      </div>
                         <div class="item" v-for="list in data.orderList">
                            <div class="store-line">
                                <i></i>
                                <h2>{{list.merchant.userName}}</h2>
                                <span>{{getStatusStr(list.orderStatus)}}</span>
                            </div>
                            <div class="goods" @tap="$router.go({name:'orderType',params:{id:list.id}})" v-for="item in list.items">
                                <div class="details">
                                    <img class="goods-line-img" :src="item.imageUrl" alt="">
                                    <div class="title settlement-title">
                                        <h3>{{item.name}}</h3>
                                        <div class="integral">
                                            {{item.point}}积分
                                        </div>
                                        <span>&#215; {{item.num}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="item-ctrl">
                                <p>共{{list.orderTotal}}件商品，合计{{list.orderGoodsPoint}}积分</p>
                                <div v-if="list.orderStatus===1" class="btn" @tap="confirmGetGoods($index)">
                                    确认收货
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  import store from '../we-store';
  export default {
    data: function () {
      return {
        data: store.state,
        tabs: ['全部', '待发货', '已发货', '已完成', '已取消'],
        currentIndex: 0
      };
    },
    methods: {
      confirmGetGoods: function (index) {
        var self = this;
        self.data.listId = self.data.orderList[index].id;
        mui.confirm(
          '提前确认可能导致货品丢失',
          '请确认货品已收到',
          ['取消', '确认收货'],
          (e) => {
            if (e.index === 1) {
              store.confirmGet(self.data.listId);
              self.currentIndex = 3;
            } else {
              self.data.listId = null;
            }
          },
          'div'
        );
      },
      goback: function () {
        window.history.go(-1);
      },
      switchTab: function (index) {
        this.currentIndex = index;
        this.data.orderStatus = this.currentIndex - 1;
        this.getFirstOrderList();
      },
      getFirstOrderList: function () {
        this.data.orderList = [];
        this.data.orderPager.pageNo = 1;
        store.getOrderList(this.data.orderStatus, this.data.orderPager.pageSize, this.data.orderPager.pageNo);
      },
      getStatusStr: function (status) {
        var str = '';
        switch (status) {
          case 0:
            str = '待发货';
            break;
          case 1:
            str = '已发货';
            break;
          case 2:
            str = '已完成';
            break;
          case 3:
            str = '已取消';
            break;
        }
        return str;
      },
      loadmore1: function () {
        store.getOrderList(this.data.orderStatus, this.data.orderPager.pageSize, this.data.orderPager.pageNo);
      }
    },
    watch: {
      '$route' (to, from) {
        if (to.query.orderStatus) {
          this.data.orderStatus = Number(to.query.orderStatus);
          this.currentIndex = this.data.orderStatus + 1;
          this.getFirstOrderList();
        }
      }
    },
    created: function () {
      this.data.orderStatus = Number(this.$route.query.orderStatus);
      this.currentIndex = this.data.orderStatus + 1;
      this.getFirstOrderList();
    },
    ready: function () {
      this.$nextTick(function () {
        mui.init({
          pullRefresh: {
            container: document.getElementById('refreshContainer'),
            up: {
              heigth: 150,
              auto: false,
              contentrefresh: '正在加载...',
              contentnomore: '没有更多数据了',
              callback: this.loadmore1
            }
          }
        });
      });
    }
  };
</script>
